<template>
    <div class="archives-wrap">
        <div class="total">共计 <strong>{{ paging.total }}</strong> 篇文章。继续努力。加油。</div>
        <div class="archives">

            <template v-for="[key, value] in yearArrList">
                <div class="time">
                    <h3>
                        <time>{{ key }}</time>
                    </h3>
                </div>
                <article v-for="(item, index) in value" :key="item.id" @click="onArticle(item)">
                    <div class="article-con">
                        <span><time>{{ item.MMDD }}</time></span>
                        <h3>{{ item.title }}</h3>
                    </div>
                </article>
            </template>
        </div>
        <Pagingtion :currentPage.sync="paging.page" :pageSize="paging.size" :total="paging.total" :showSideBtn="false" @changePage="onChangePage" />
    </div>
</template>

<script>
    import { articleList } from '@/api/archives'
    import Cache from '@/utils/cache/index'
    const cache = new Cache()
    cache.setCacheType = 'sessionStorage'

    import constant from '@/utils/constant'
    const { CACHE_ARCHIVES_LIST } = constant

    export default {
        data() {
            return {
                paging: {
                    page: 1,
                    size: 10,
                    total: null,
                },
                yearArrList: {},
            }
        },
        created() {
            this.getArticleList()
        },
        methods: {
            onChangePage (page) {
                this.paging.page = page
                this.getArticleList()
            },
            async getArticleList () {
                let { page } = this.paging
                let cacheData = await cache.getPagingCacheSync(CACHE_ARCHIVES_LIST, page)
                if (!cacheData) { // 没有缓存
                    return this.requestList()
                }

                let { paging, result } = cacheData
                this.handleList({ paging, result })
            },
            // 获取列表
            async requestList () {
                let { total, ...paging } = this.paging
                let params = {
                    ...paging,
                }
                let { result, paging: resPaging } = await articleList(params)

                this.handleList({ paging: resPaging, result })
                cache.setPagingCacheSync(CACHE_ARCHIVES_LIST, { paging: resPaging, result })
            },
            // 处理列表
            handleList ({ paging, result }) {
                this.paging.total = paging.total
                let yearArrList = new Map()
                result.forEach(item => {
                    let [YY, MM, DD] = item.create_time.split('T')[0].split('-')

                    if (!yearArrList.has(YY)) {
                        yearArrList.set(YY, [])
                    }
                    yearArrList.get(YY).push({
                        ...item,
                        MMDD: `${MM}-${DD}`
                    })
                })
                yearArrList = [...yearArrList]
                yearArrList.sort((a, b) => a[0] - b[0])
                this.yearArrList = new Map(yearArrList)
            },
            onArticle (article) {
                this.$router.push({
                    name: 'article',
                    params: {
                        articleId: article.id
                    },
                })
            },
        },
    }
</script>

<style scoped>
    .archives-wrap {
        padding-bottom: 20px;
    }
    .archives {
        margin: auto;
        width: 800px;
        text-align: left;
    }

    .total {
        margin: auto;
        width: 800px;
        text-align: left;
    }

    .archives .time {
        position: relative;
        margin: 30px 0;
        padding-left: 30px;
        font-size: 16px;
    }

    .archives .time::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -5px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #ddd;

    }

    .archives article {
        margin-bottom: 20px;
        padding: 10px 0 15px;
        border-bottom: 1px dashed #ccc;
    }

    .archives .article-con {
        position: relative;
        padding-left: 30px;
        cursor: pointer;
    }

    .archives article h3 {
        display: inline-block;
        padding-left: 10px;
        font-weight: 400;
    }

    .archives article time {
        font-size: 12px;
    }

    .article-con::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -3px;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: #ddd;
    }

    .archives article:hover {
        border-bottom-color: #333;
    }

    .archives article:hover .article-con::before {
        background-color: #333;
    }

</style>
